<template>
  <div>
    <h1>Home</h1>
    <div>
      <h2>声明式路由跳转(push)</h2>
      <router-link to='course' tag="button" active-class="aaa">course</router-link>
      <router-link to='/home/game' tag="button" >game</router-link>
      <router-link :to="{path:'/home/news'}" tag="button">news</router-link>
    </div>
    <div>
      <h2>声明式路由跳转(replace)</h2>
      <router-link to='course' tag="button" active-class="aaa" replace>course</router-link>
      <router-link to='/home/game' tag="button" replace>game</router-link>
      <router-link :to="{path:'/home/news'}" tag="button" replace>news</router-link>
    </div>
    <br>
    <div>
      <h2>编程式路由跳转(push)</h2>
      <button @click="$router.push('course')">course</button>
      <button @click="$router.push('/home/game')">game</button>
      <button @click="$router.push({name:'news'})">news</button>
    </div>
    <br>
    <div>
      <h2>编程式路由跳转(replace)</h2>
      <button @click="$router.replace('course')">course</button>
      <button @click="$router.replace('/home/game')">game</button>
      <button @click="$router.replace({name:'news'})">news</button>
    </div>
    <br>
    <div>
      <button @click="$router.back()">回退</button>
      <button @click="$router.forward()">前进</button>
      <button @click="$router.go(-2)">回退2步</button>
    </div>
    <br>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name:'Home'
  }
</script>

<style scoped>
  .router-link-active{
    color: rgb(255, 0, 136);
  }
  .aaa{
    color: rgb(67, 226, 43);
  }
</style>